import React from 'react'
import {useSelector, useDispatch} from 'react-redux'
// useSelector 作用：获取redux仓库数据
// useDispatch 作用：获得一个dispatch函数

import { addNum } from './store/slice/countSlice'

export default function App() {
    const dispatch = useDispatch();// 获得dispatch函数
    /**
     * useSelector函数接收一个回调函数作为参数，
     *          1. 回调函数的参数是redux仓库数据
     *          2. 回调函数的返回值，是useSelector函数的返回值
     * 
     * let res = useSelector((state)=>{
     *      console.log('state: ', state);
     *      return 123;
     *  })
     *  console.log('res: ', res);
     */
    let {num} = useSelector(state=>state.count)
    // 完整写法
    // let {num} = useSelector(state=>{
    //     return state.count
    // })
    
    return (
        <div>
            <h3>App</h3>
            <p>num: {num}</p>
            <p><button onClick={()=>{
               dispatch(addNum(3));
            }}>num++</button></p>
        </div>
    )
}
